<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="银行卡添加" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view class="contain">
			<view class="list-item">
				<text>姓名</text>
				<input class="uni-input" v-model="username" placeholder="请输入真实姓名" />
			</view>
			<view class="area">
				<view class="area-tit">银行卡归属地</view>
				<view class="select-section">
					<view class="select-s">
						<view class="province item">
							<view class="tit">
								请选择省份
								<text class="iconfont">&#xe6b0;</text>
							</view>
							<view class="pick-v">
								<picker class="pick" @change="bindProvincePicker" :value="provinceCodeindex" :range="provinceNameArr">
									<text class="uni-input">{{ provinceNameArr[provinceCodeindex] }}</text>
								</picker>
							</view>
						</view>
						<view class="city item">
							<view class="tit">
								请选择城市
								<text class="iconfont">&#xe6b0;</text>
							</view>
							<view class="pick-v">
								<picker class="pick" @change="bindCityPicker" :value="cityCodeindex" :range="cityNameArr">
									<text class="uni-input">{{ cityNameArr[cityCodeindex] }}</text>
								</picker>
							</view>
						</view>
						<view class="bank-card item">
							<view class="tit">
								请选择银行卡
								<text class="iconfont">&#xe6b0;</text>
							</view>
							<view class="pick-v">
								<picker class="pick" @change="bindBankCodePicker" :value="bankCodeindex" :range="bankCodeNameArr">
									<text class="uni-input">{{ bankCodeNameArr[bankCodeindex] }}</text>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<text>银行卡号</text>
				<input class="uni-input" v-model="bankNo" placeholder="请输入银行卡号" />
			</view>
			<view class="list-item">
				<text>确认卡号</text>
				<input class="uni-input" v-model="bankNoRe" placeholder="请输入确认卡号" />
			</view>
			<view class="list-item">
				<text>开户网点</text>
				<input class="uni-input" v-model="bankPosition" placeholder="请输入开户网点" />
			</view>
			<view class="com-btn" @click="submitBtn()">确定</view>
			<view class="note-tit">
				<text class="tit-warn">*特别提示：</text>
				<text>为了您的账户安全及存取款到账时间，请您务必填写真实银行卡及对应姓名，否则一切后果本公司概不负责</text>
			</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import json from '@/static/js/citycode.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			provinceCodeStr: '', //省份的code值
			provinceList: [],//从json文件读取的所有值
			cityCodeStr: '', //城市code值
			bankCode: '', //银行卡类型的code值
			bankNo: '', //银行卡号
			bankNoRe: '', //重复的银行卡号
			bankPosition: '', //开户网点
			username: '', //姓名
			bankCodeArr: ['ICBC', 'ABC', 'BCM', 'CCB', 'CEB', 'CMB', 'BOC', 'CMBC', 'CIB', 'GDB', 'PSBC', 'CNCB', 'SPDB', 'PAB', 'HXB', 'ADBC', 'RCC', 'CB'],
			bankCodeNameArr: [
				'中国工商银行',
				'中国农业银行',
				'交通银行',
				'中国建设银行',
				'光大银行',
				'招商银行',
				'中国银行',
				'中国民生银行',
				'兴业银行',
				'广东发展银行',
				'邮政储蓄银行',
				'中信银行',
				'浦发银行',
				'平安银行',
				'华夏银行',
				'农业发展银行',
				'农村信用社',
				'商业银行'
			],
			bankCodeindex: -1,
			provinceCodeArr: [],
			provinceNameArr: [],
			provinceCodeindex: -1,
			cityCodeArr: [''],
			cityNameArr: ['请选择省份'],
			cityCodeindex: -1
		};
	},
	onLoad() {
		this.getRegion();
	},
	methods: {
		/**
		 * 选择银行的数据
		 */
		bindBankCodePicker(e) {
			if (e.target.value === -1) {
				this.bankCodeindex = 0;
			} else {
				this.bankCodeindex = e.target.value;
			}
			this.bankCode=this.bankCodeArr[parseInt(this.bankCodeindex)];
		},
		/**
		 * 选择省份
		 */
		bindProvincePicker(e) {
			if (e.target.value === -1) {
				this.provinceCodeindex = 0;
			} else {
				this.provinceCodeindex = e.target.value;
			}
			this.provinceCodeStr=this.provinceCodeArr[parseInt(this.provinceCodeindex)];//省份的code值
			this.cityCodeindex = -1;
			this.cityCodeStr="";
			
			let cityData = this.provinceList[parseInt(this.provinceCodeindex)]['citys'];
			this.deaiCity(cityData);
		},
		/**
		 * 选择城市
		 */
		bindCityPicker(e) {
			if (this.cityNameArr[0] == '请选择省份') {
				VueTools.toastNo('请选择省份');
				return;
			}
			if (e.target.value === -1) {
				this.cityCodeindex = 0;
			} else {
				this.cityCodeindex = e.target.value;
			}
			this.cityCodeStr=this.cityCodeArr[parseInt(this.cityCodeindex)];
		},
		/**
		 * 获取城市的数据
		 */
		getRegion() {
			let data = json.data;
			this.provinceList = data;
			for (let index in data) {
				this.provinceCodeArr[index] = data[index]['code'];
				this.provinceNameArr[index] = data[index]['cn'];
			}
		},
		/**
		 * 选择省时候重置城市的数据
		 * @param {Object} cityObj  城市的数据
		 */
		deaiCity(cityObj) {
			for (let index in cityObj) {
				this.cityCodeArr[index] = cityObj[index]['code'];
				this.cityNameArr[index] = cityObj[index]['cn'];
			}
		},
		/**
		 * 确定提交数据
		 */
		submitBtn() {
			
			if (Tools.isEmpty(this.username)) {
				VueTools.toastNo('请输入真实姓名');
				return;
			}
			if (Tools.isEmpty(this.provinceCodeStr)) {
				VueTools.toastNo('请选择省份');
				return;
			}
			if (Tools.isEmpty(this.cityCodeStr)) {
				VueTools.toastNo('请选择城市');
				return;
			}
			if (Tools.isEmpty(this.bankCode)) {
				VueTools.toastNo('请选择银行');
				return;
			}
			if (Tools.isEmpty(this.bankNo)) {
				VueTools.toastNo('请输入银行卡号');
				return;
			}
			if (!Tools.isNumber(this.bankNo)) {
				VueTools.toastNo('卡号必须都为数字');
				return;
			}
			if (Tools.isEmpty(this.bankNoRe)) {
				VueTools.toastNo('请输入确认卡号');
				return;
			}
			if (this.bankNo != this.bankNoRe) {
				VueTools.toastNo('两次输入的卡号不一致');
				return;
			}
			if (Tools.isEmpty(this.bankPosition)) {
				VueTools.toastNo('两次输入开户网点');
				return;
			}
			this.submit();
		},

		submit() {
			let that = this;
			Net.ayiHttp(
				URL.USER_EDITUSERBANK,
				'{"bankcode":"' +
					this.bankCode +
					'","username":"' +
					this.username +
					'","card":"' +
					this.bankNo +
					'","prvcode":"' +
					this.provinceCodeStr +
					'","citycode":"' +
					this.cityCodeStr +
					'","addr":"' +
					this.bankPosition +
					'"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						uni.$emit("showBankList");
						that.goBackPage();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.contain {
	padding: 0rpx 20rpx;
}
.list-item {
	height: 80rpx;
	border-bottom: 1px solid #e8e9ec;
	font-size: 34rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.uni-input {
		padding-left: 20rpx;
	}
}
.area {
	.area-tit {
		height: 80rpx;
		font-size: 34rpx;
		line-height: 80rpx;
	}
	.select-section {
		background: #fff;
	}
	.select-s {
		background: #ededed;
		padding: 20rpx;
		border-radius: 20rpx;
		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			background: #fff;
			font-size: 34rpx;
			padding: 0px 20rpx;
			.iconfont {
				font-size: 40rpx;
				color: #cacaca;
			}
			.tit {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100%;
			}
			.pick-v {
				height: 80rpx;
				min-width: 320rpx;
				text-align: right;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				.pick {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
}
.com-btn {
	border-radius: 16rpx;
	height: 80rpx;
	background: linear-gradient(to right, #ff6163, #e9385d);
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	margin: 60rpx 0rpx;
	font-size: 32rpx;
}
.note-tit {
	font-size: 24rpx;
	.tit-warn {
		color: #ef4265;
	}
}
</style>
